---
title: Input
description: "`Input`は、ユーザーからのテキスト入力を取得するために使用されるコンポーネントです。"
storybook: components-input--basic
source: components/input
style: components/input/input.style.ts
---

```tsx preview
<Input placeholder="Placeholder" />
```

## 使い方

:::code-group

```tsx [package]
import { Input, InputGroup } from "@yamada-ui/react"
```

```tsx [alias]
import { Input, InputGroup } from "@/components/ui"
```

```tsx [monorepo]
import { Input, InputGroup } from "@workspaces/ui"
```

:::

```tsx
<Input />
```

```tsx
<InputGroup.Root>
  <InputGroup.Addon />
  <Input />
  <InputGroup.Element />
</InputGroup.Root>
```

### バリアントを変更する

```tsx preview
<VStack>
  <For each={["outline", "filled", "flushed"]}>
    {(variant) => (
      <Input
        key={variant}
        variant={variant}
        placeholder={toTitleCase(variant)}
      />
    )}
  </For>
</VStack>
```

### サイズを変更する

```tsx preview
<VStack>
  <For each={["sm", "md", "lg"]}>
    {(size) => <Input key={size} size={size} placeholder={`Size (${size})`} />}
  </For>
</VStack>
```

### カラースキームを変更する

```tsx preview
<VStack>
  <For each={["success", "warning"]}>
    {(colorScheme) => (
      <Input
        key={colorScheme}
        colorScheme={colorScheme}
        placeholder={toTitleCase(colorScheme)}
      />
    )}
  </For>
</VStack>
```

### 無効にする

無効にする場合は、`disabled`を`true`に設定します。

```tsx preview
<VStack>
  <For each={["outline", "filled", "flushed"]}>
    {(variant) => (
      <Input
        key={variant}
        disabled
        variant={variant}
        placeholder={toTitleCase(variant)}
      />
    )}
  </For>
</VStack>
```

### 読み取り専用にする

読み取り専用にする場合は、`readOnly`を`true`に設定します。

```tsx preview
<VStack>
  <For each={["outline", "filled", "flushed"]}>
    {(variant) => (
      <Input
        key={variant}
        readOnly
        variant={variant}
        placeholder={toTitleCase(variant)}
      />
    )}
  </For>
</VStack>
```

### 無効な入力にする

無効な入力にする場合は、`invalid`を`true`に設定します。

```tsx preview
<VStack>
  <For each={["outline", "filled", "flushed"]}>
    {(variant) => (
      <Input
        key={variant}
        invalid
        variant={variant}
        placeholder={toTitleCase(variant)}
      />
    )}
  </For>
</VStack>
```

### アドオンを追加する

アドオンを追加する場合は、`Input`を`InputGroup`でラッピングし、`InputGroup.Addon`を使用します。

```tsx preview
<VStack>
  <For each={["outline", "filled", "flushed"]}>
    {(variant) => (
      <InputGroup.Root key={variant} variant={variant}>
        <InputGroup.Addon>https://</InputGroup.Addon>
        <Input placeholder="Your site address" />
        <InputGroup.Addon>.com</InputGroup.Addon>
      </InputGroup.Root>
    )}
  </For>
</VStack>
```

### 要素を追加する

要素を追加する場合は、`Input`を`InputGroup`でラッピングし、`InputGroup.Element`を使用します。

```tsx preview
<VStack>
  <For each={["outline", "filled", "flushed"]}>
    {(variant) => (
      <InputGroup.Root key={variant} variant={variant}>
        <InputGroup.Element>
          <PhoneIcon />
        </InputGroup.Element>
        <Input type="tel" placeholder="Your phone number" />
      </InputGroup.Root>
    )}
  </For>
</VStack>
```

### タイプを変更する

タイプを変更する場合は、`type`に[タイプ](https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/input#input_%E3%81%AE%E5%9E%8B)を設定します。

```tsx preview
<Input placeholder="Select Date and Time" type="datetime-local" />
```

### ボーダーの色を変更する

ボーダーの色を変更する場合は、`focusBorderColor`または`errorBorderColor`に値を設定します。

```tsx preview
<VStack>
  <Input focusBorderColor="green.500" placeholder="Custom focus border color" />
  <Input
    errorBorderColor="orange.500"
    invalid
    placeholder="Custom invalid border color"
  />
</VStack>
```

### プレースホルダーのカラーを変更する

プレースホルダーのカラーを変更する場合は、`_placeholder`に値を設定します。

```tsx preview
<Input placeholder="Custom placeholder" _placeholder={{ color: "blue.500" }} />
```

### フローティングラベルを使う

```tsx preview
<Field.Root>
  <Input type="email" data-peer placeholder="" />
  <Field.Label
    css={{
      bg: "bg",
      fontSize: "sm",
      fontWeight: "normal",
      insetStart: "2",
      pointerEvents: "none",
      position: "absolute",
      px: "1",
      top: "-12px",
      transitionDuration: "moderate",
      transitionProperty: "top, color, font-size",
      transitionTimingFunction: "ease-in-out",
      zIndex: "yamcha",
      _peerPlaceholderShown: {
        color: "fg.subtle",
        fontSize: "md",
        insetStart: "2",
        top: "5px",
      },
      // eslint-disable-next-line perfectionist/sort-objects
      _peerFocusVisible: {
        color: "fg",
        fontSize: "sm",
        insetStart: "2",
        top: "-12px",
      },
    }}
  >
    Email
  </Field.Label>
</Field.Root>
```

### 制御する

```tsx preview functional client
const [value, setValue] = useState<string>("オッス！オラ悟空！")

return <Input value={value} onChange={(ev) => setValue(ev.target.value)} />
```

## Props

<PropsTable
  name="input"
  all
  omit={["InputGroupRoot", "InputAddon", "InputElement"]}
/>

## アクセシビリティ

現在、v2の移行に伴い、このセクションは更新中です。
